<template>
	<view class="bigbox">
		<view class="top_button">
			<u-button type="success" plain @click="goToSendEvelopment">去发个动态试试?</u-button>
		</view>
		<view class="list_every" v-for="item in 5" :key="item">
			<view class="user_info">
				<view class="image">
					<image src="/static/image_two.jpg" mode=""></image>
				</view>
				<view class="name">
					姓名
				</view>
			</view>
			<view class="image_list">
				<image src="../../static/image_six.jpg" mode=""></image>
				<image src="../../static/image_six.jpg" mode=""></image>
				<image src="../../static/image_six.jpg" mode=""></image>
			</view>
			<view class="title_content">
				这里是最好的博物馆这里是最好的博物馆这里是最好的博物馆这里是最好的博物馆这里是最好的博物馆
			</view>
			
			<view class="development">
				<u--input @change="changeVal" v-model="inputVal"></u--input>
				<view class="button">
					<u-button  type="primary" @click="pingLun">评论</u-button>
				</view>
			</view>
			<view class="pinglun_title">
				评论
			</view>
			<view class="speak">
				<view class="speak_for" v-for="item in 5" :key="item">
					<image src="../../static/logo.png" mode=""></image>
					<view class="speak_content">
						是的是的是的是的是的是的是的是的是的
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			inputVal:''
			};
		},
		methods:{
			changeVal(e){
				console.log(e);
				if(e.length>=20){
					this.$uni.gettitle('您输入的语句过长!')
					this.inputVal = ''
				}else{
					// console.log();
					this.inputVal = e
				}
			},
			//调用评论接口
			pingLun(){
				
			},
			goToSendEvelopment(){
				uni.navigateTo({
					url:'/pages/senddevelopment/senddevelopment'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
		.bigbox{
			padding: 0 25rpx;
			.top_button{
				margin-top: 20rpx;
			}
			.list_every{
				margin-top: 30rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
				.user_info{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.image{
						height: 80rpx;
						width: 80rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}
					.name{
						margin-left: 20rpx;
					}
				}
				.image_list{
					display: flex;
					justify-content: space-between;
					image{
						width: 200rpx;
						height: 200rpx;
					}
				}
				.pinglun_title{
					border-bottom: 1rpx solid #eee;
					padding: 20rpx 0;
				}
				.title_content{
					margin: 25rpx 0;
					
				}
				.development{
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #eee;
					.button{
						margin-left: 20rpx;
					}
				}
				.speak{
					margin-top: 30rpx;
					.speak_for{
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						image{
							width: 64rpx;
							height: 64rpx;
						}
						.speak_content{
							margin-left: 20rpx;
							font-size: 28rpx;
						}
					}
					
				}
			}
		}
	}
</style>